{include file="index@public/header" /}
<style>
    .register{
        position:fixed;
        top:3em;
        width:80%;
        margin:10%;
    }
</style>
<div class = "register">
    <div class = "col-xs-12 text-center"><h4>用户注册</h4></div>
    <form role="form" name = "myForm" ng-controller="validateCtrl" novalidate>
        <div class="form-group">
            <label>用户名</label>
            <input type="text" class="form-control" name = "username" ng-model="username" placeholder="用户名" maxlength = "12" minlength = "3" required/>
            <p class = "help-block" ng-hide="myForm.username.$dirty && myForm.username.$invalid">请输入用户名</p>
            <span style="color:red" ng-show="myForm.username.$dirty && myForm.username.$invalid">
                <p ng-show="myForm.username.$error.required">用户名是必需的</p>
                <p ng-show="myForm.username.$error.minlength">用户名长度为3-6位</p>
            </span>
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" class="form-control" name = "password" ng-model="password" placeholder="密码" maxlength = "12" minlength = "6" required/>
            <p class = "help-block" ng-hide="myForm.password.$dirty && myForm.password.$invalid">密码支持6-12位的数字、字符串</p>
            <span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
                <p ng-show="myForm.password.$error.required">密码是必需的</p>
                <p ng-show="myForm.password.$error.minlength">密码支持6-12位的数字、字符串</p>
            </span>
        </div>
        <div class="form-group">
            <label>确认密码</label>
            <input type="password" class="form-control" name = "againPwd" ng-model="againPwd" placeholder="确认密码" required/>
            <p class = "help-block" ng-hide="myForm.againPwd.$dirty">请再次输入您的密码</p>
            <span style="color: red" ng-show="myForm.againPwd.$dirty">
                <p ng-show="myForm.againPwd.$error.required">请确认您的密码</p>
                <span ng-show="myForm.againPwd.$valid && password != againPwd">两次密码输入不一致</span>
            </span>
        </div>
        <div class="checkbox">
            <label>
                <input type = "checkbox" class = "checkbox" ng-click = "check = !check" ng-init = "check = true" checked="checked" required /> 同意《xxx在线协议》
            </label>
        </div>
        <div class = "col-xs-12 text-center"><button type="submit" class = "btn btn-primary" ng-disabled="myForm.username.$invalid || myForm.password.$invalid || myForm.againPwd.$invalid || false == check">完善资料</button></div>
    </form>
</div>
<script type="text/javascript">
    app.controller('validateCtrl', function($scope) {});
</script>
{include file="index@public/footer" /}